<template>
  <!-- 关联 -->
  <el-dialog
    v-model="relationModalVisible"
    title="关联文档"
    width="500"
    append-to-body
  >
    <div class="relation">
      <el-select
        v-model="value"
        placeholder="Select"
        size="small"
        style="width: 100px"
        @change="selectChange"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input
        v-model="editValue"
        style="width: 200px"
        size="small"
        placeholder="请输入关键词搜索"
      />
    </div>
    <CLTable
      :fields="fields"
      :initial-data="tableData"
      line-height="medium"
      :table-config="tableConfig"
    />
    <template #footer>
      <div class="footer">
        <el-button size="small" @click.stop="handleCancelRelation"
          >取消</el-button
        >
        <el-button size="small" type="primary" @click="handleSureRelation">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  import { ref, defineExpose, computed, onMounted } from "vue";
  import CLTable from "@/components/CLTable/index.vue";
  import { getDocCenterList } from "./api.ts";
  const check = ref(false);

  const relationModalVisible = ref(false);
  const value = ref("input");
  const editValue = ref("");
  const options = [
    {
      value: "input",
      label: "项目输入",
    },
    {
      value: "modal",
      label: "模型管理",
    },
    {
      value: "output",
      label: "输出数据",
    },
  ];
  const tableData = ref([]);
  // CLTable 字段配置
  const referenceFields = ref([
    {
      id: 1,
      name: "名称",
      field: "fileName",
      type: "text",
      invisible: true,
      checked: true,
      disable: false,
    },
    {
      id: 2,
      name: "数据源",
      field: "source",
      type: "text",
      invisible: true,
      checked: true,
      disable: false,
    },
    {
      id: 3,
      name: "版本",
      field: "version",
      type: "text",
      invisible: true,
      checked: true,
      disable: false,
    },
    {
      id: 4,
      name: "类型",
      field: "type",
      type: "actions",
      invisible: true,
      checked: true,
      disable: false,
    },
  ]);

  // CLTable 配置
  const tableConfig = ref({
    tableH: "300px",
    showOperationsColumn: false,
    page: {
      showOperationsColumn: true,
      enable: true,
      pageSizes: [10, 20, 50, 100],
      size: "small",
      disabled: false,
      background: true,
      layout: "total, sizes, prev, pager, next, jumper",
    },
    OperationsColumnMode: "textIcon", // 操作列模式，text为文本模式
    OperationsColumnWidth: 110, //自定义操作列宽度
    borderMode: "none", // 表格边框模式，none为无边框
  });

  defineExpose({
    visible: relationModalVisible,
    check,
  });
  defineProps([""]);

  /**
   * @description 处理下拉框数据选择
   */
  const selectChange = (val: string) => {
    console.log(val, "dddd");
  };

  /**
   * @description 处理取消 -- 关联文档
   */
  const handleCancelRelation = () => {
    relationModalVisible.value = false;
  };

  /**
   * @description 处理确定 -- 关联文档
   */
  const handleSureRelation = () => {
    relationModalVisible.value = false;
  };

  const fields = computed(() => {
    if (["input"].includes(value.value)) {
      return referenceFields.value.filter((ele) =>
        ["fileName", "version", "type"].includes(ele.field),
      );
    }
    return referenceFields.value.filter((ele) =>
      ["fileName", "source"].includes(ele.field),
    );
  });

  /**
   * @description 获取文档数据
   */
  const getList = async () => {
    try {
      const params = {
        conditions: [
          //   {
          //     field: "type",
          //     operator: "=",
          //     value: type.value,
          //   },
        ],
        pageNo: 1,
        pageSize: 100000,
      };
      const res = await getDocCenterList(params);
      console.log(res, "res");
      tableData.value = [
        {
          id: 1,
          type: "input",
          soucre: "11",
          fileName: "fileName",
          version: "version",
        },
      ];
    } catch (error) {}
  };

  onMounted(() => {
    getList();
  });
</script>

<style scoped lang="scss">
  .footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }
  .relation {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
</style>
